import React, {Component} from 'react';
import {
    StyleSheet, 
    View,
    Text,
    Image,
    FlatList,
    TextInput,
    TouchableOpacity,
    SafeAreaView,
    DeviceEventEmitter,
} from 'react-native';
import { Formik } from 'formik';
import { RRCLoading, RRCToast } from 'react-native-overlayer';
import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';
import HttpUtil from '../util/HttpUtil';
import BaseComponent from '../component/BaseComponent';
import Reason from '../component/Reason';
import Area from '../component/Area';
import Rack from '../component/Rack';
import BranchTree from '../component/BranchTree';
import UserTree from '../component/UserTree';
import DeviceInfo from 'react-native-device-info';
import InfraredModule from '../component/Infrared';
import {NavigationEvents} from 'react-navigation';

const data = [
    // { id:1, name:'IBMX3128服务器', rfid:'AC8231749888', state:'迁入', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' }, 
    // { id:2, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:3, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:4, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:5, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:6, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:7, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:8, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:9, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:10, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' }, 
    // { id:11, name:'IBMX3128服务器', rfid:'AC8231749888', state:'迁入', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' }, 
    // { id:12, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:13, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:14, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:15, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:16, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:17, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:18, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:19, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:20, name:'11111111111111', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
];
let that = {};
export default class AddMove extends BaseComponent {

    constructor(props){
        super(props);
        this.state={
          showReasonModal: false,
          showAreaModal: false,
          showRackModal: false,
          showManageBranchModal: false,
          showManageUserModal: false,
          roomType: 0,
          dataCenterId: '',
          startU: '',
          reasonName: '',
          reasonId: '',
          areaId: '',
          areaName: '',
          assets: [],
          moveReasonList: [],
          datacenterRoomTree: [],
          racks: [],
          cabinetList: [],
          branchList:[],
          rackId: '',
          rackName: '',
          manageBranchName: '',
          manageBranchId: '',
          manageUserName: '',
          manageUser: '',
          selectUserList: [],
          selected: [],
          selectedShow: [],
        }
        that = this;
    }

    componentDidMount() {
        RRCLoading.setLoadingOptions({
            text: '加载中',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
            loadingTextStyle: {}
        })
        RRCLoading.show();
        this.init();        
    }

    componentWillUnmount() {
        if(DeviceInfo.getDeviceId() === 'rk30sdk'){
            if(InfraredModule.getState() === 'init'){
                InfraredModule.destory();
                //console.log('释放了批量变更页的红外读头 状态:'+InfraredModule.getState());
            }
            
            if(this.infraredListener){
                this.infraredListener.remove();
                //console.log('释放了批量变更页的红外监听');
            }
        }
    }

    onBackClicked = () => {
        this.props.navigation.navigate('Main');
        this.props.navigation.state.params.callBack();
        return true;
    }

    back = () =>{
        this.props.navigation.navigate('Main');
        this.props.navigation.state.params.callBack();
    }

    init = () => {
       
        HttpUtil.post('basicData', null)
        .then(result => {     
            if(result.httpCode == 200){
                //console.log(result);
                let reasonList = [];
                if(result.data && result.data.moveReasonList && result.data.moveReasonList.length>0){
                    result.data.moveReasonList.forEach(element => {
                        console.log(element)
                        let showName = element.showName;
                        if(showName == "到货入库" || showName == "等待交付" || showName == "交付完成"){
                            return;
                        }
                        reasonList.push(element)
                    });
                }
                this.setState({
                    moveReasonList: reasonList,
                    datacenterRoomTree: result.data.datacenterRoomTree,
                    cabinetList: result.data.cabinetList,
                    branchList: result.data.departmentTree,
                    userList: result.data.userList,
                    // brandModeList: result.data.brandModelTree,
                    // typeList: result.data.typeVo,
                    // roomList: result.data.datacenterRoomTree,
                    // branchList: result.data.departmentTree,
                    // userList: result.data.userList,
                });
                RRCLoading.hide();
            }else{
                RRCLoading.hide();
                RRCToast.show('系统异常', 2, 3000);
            }
        })
        .catch(error => {
            RRCLoading.hide();
            RRCToast.show('系统异常', 2, 3000);
        })
    }

    renderItem(item){
        return (
            <View key={item.id} style={styles.row}>
                <View style={styles.rowLeft}>
                    <Text style={styles.name}>{item.name}</Text>
                    <Text style={styles.rfid}>RFID: {item.rfid}</Text>
                </View>
                <TouchableOpacity onPress={ () => this.remove(item.id)}>
                    <View style={styles.rowRight}>
                        <Image source={ require('../images/del.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    openReasonModal = () => {
        this.setState({
            showReasonModal: true,
        });
    }

    closeReasonModal = () => {
        this.setState({
            showReasonModal: false,
        });
    }

    selectReason = ( reason ) => {
        this.setState({
            reasonName: reason.showName,
            reasonId: reason.id_,
            showReasonModal: false,
        });
    }

    openAreaModal = () => {
        this.setState({
            showAreaModal: true,
        });
    }

    closeAreaModal = () => {
        this.setState({
            showAreaModal: false,
        });
    }

    selectArea = ( area ) => {
        if(area.isRoom){
            this.setState({
                roomType: area.roomType,
                areaName: area.label,
                areaId: area.value,
                dataCenterId: area.dataCenterId,
                showAreaModal: false,
                racks: [],
                rackId: '',
                rackName: '',
                startU: '',
            });
        }
        if(area.roomType==1){
            let racks = [];
            this.state.cabinetList.forEach((value) => {
                if(area.value == value.roomId_){
                    racks.push(value);
                }
            });
            this.setState({
                racks: racks,
            }); 
        }
    }

    openRackModal = () => {
        this.setState({
            showRackModal: true,
        });
    }

    closeRackModal = () => {
        this.setState({
            showRackModal: false,
        });
    }

    selectRack = ( rack ) => {
        this.setState({
            rackId: rack.id_,
            rackName: rack.assetName,
            showRackModal: false,
        });
    }

    openManageBranchModal = () => {
        this.setState({
            showManageBranchModal: true,
        });
    }

    closeManageBranchModal = () => {
        this.setState({
            showManageBranchModal: false,
        });
    }

    selectManageBranch = (branch) => {
        //if(branch.isEnd){
            this.setState({
                manageBranchName: branch.name,
                manageBranchId: branch.id_,
                showManageBranchModal: false,
                manageUserName:'',
                manageUser: '',
            });
        //} 
    }

    openManageUserModal = () => {
        let selectUserList = [];
        this.state.userList.forEach((value) => {
            //console.log(value.name);
            if(this.state.manageBranchId == value.deptId_){
                selectUserList.push(value);
            }
        });
        this.setState({
            selectUserList: selectUserList,
            showManageUserModal: true,
        });
    }

    closeManageUserModal = () => {
        this.setState({
            showManageUserModal: false,
        });
    }

    selectManageUser = (user) => {
        this.setState({
            manageUserName: user.name,
            manageUser: user.id_,
            showManageUserModal: false,
        });
    }

    openSnScan = () => {
        DeviceInfo.isCameraPresent()
        .then(isCameraPresent => {
            if((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk'){
                this.props.navigation.navigate('QBarCodeScan', {
                    isGoBack: true,
                    isHaveCamera: true,
                    isRfid: false, 
                    callBack: ( code ) => {
                        let args = {
                            searchNum: code,
                        }
                        HttpUtil.post('assetData', args)
                        .then(result => {         
                            if(result.httpCode == 200 && 'data' in result){
                                let selected = [];
                                let selectedShow = [];
                                if(!this.state.selected.includes(result.data.id_)){
                                    selected.push(result.data.id_);
                                    selectedShow.push({ id: result.data.id_, name: result.data.assetName, rfid: result.data.rfidNo ,status:result.data.status});
                                    this.setState({
                                        selected: selected.concat(this.state.selected),
                                        selectedShow: selectedShow.concat(this.state.selectedShow),
                                    });
                                }
                                
                                RRCLoading.hide();
                            }else{
                                RRCLoading.hide();
                                RRCToast.show('未查找到资产', 2, 3000);
                            }
                        })
                        .catch(error => {
                            //console.log(error);
                            RRCLoading.hide();
                            RRCToast.show('系统异常', 2, 3000);
                        })
                    }        
                });
            }else if(isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk'){
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: true, 
                        callBack: ( code ) => {
                            let args = {
                                searchNum: code,
                            }
                            HttpUtil.post('assetData', args)
                            .then(result => {         
                                if(result.httpCode == 200 && 'data' in result){
                                    let selected = [];
                                    let selectedShow = [];
                                    if(!this.state.selected.includes(result.data.id_)){
                                        selected.push(result.data.id_);
                                        selectedShow.push({ id: result.data.id_, name: result.data.assetName, rfid: result.data.rfidNo,status:result.data.status});
                                        this.setState({
                                            selected: selected.concat(this.state.selected),
                                            selectedShow: selectedShow.concat(this.state.selectedShow),
                                        });
                                    }
                                    
                                    RRCLoading.hide();
                                }else{
                                    RRCLoading.hide();
                                    RRCToast.show('未查找到资产', 2, 3000);
                                }
                            })
                            .catch(error => {
                                //console.log(error);
                                RRCLoading.hide();
                                RRCToast.show('系统异常', 2, 3000);
                            })
                        }       
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }else{
                if(DeviceInfo.getDeviceId() === 'rk30sdk'){
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: false,
                        isRfid: true, 
                        callBack: ( code ) => {
                            let args = {
                                searchNum: code,
                            }
                            HttpUtil.post('assetData', args)
                            .then(result => {         
                                if(result.httpCode == 200 && 'data' in result){
                                    let selected = [];
                                    let selectedShow = [];
                                    if(!this.state.selected.includes(result.data.id_)){
                                        selected.push(result.data.id_);
                                        selectedShow.push({ id: result.data.id_, name: result.data.assetName, rfid: result.data.rfidNo ,status:result.data.status});
                                        this.setState({
                                            selected: selected.concat(this.state.selected),
                                            selectedShow: selectedShow.concat(this.state.selectedShow),
                                        });
                                    }
                                    
                                    RRCLoading.hide();
                                }else{
                                    RRCLoading.hide();
                                    RRCToast.show('未查找到资产', 2, 3000);
                                }
                            })
                            .catch(error => {
                                //console.log(error);
                                RRCLoading.hide();
                                RRCToast.show('系统异常', 2, 3000);
                            })
                        }        
                    });
                }else{
                    RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                    return;
                }
            }
        })
        .catch(cameraAccessException => {
            RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
            return;
        });  
    }
    

    remove = ( id ) => {
        let selected = Array.from(this.state.selected);
        let selectedShow = Array.from(this.state.selectedShow);
        selected.splice(selected.findIndex(i => i === id), 1);
        selectedShow.forEach((value, index) => {
            if(id == value.id){
                selectedShow.splice(selectedShow.findIndex(value => value.id === id), 1)
            }
        });
        this.setState({
            selected: selected,
            selectedShow: selectedShow,
        });
    }

    handleChange = (field) => {
        this.setState(field);
    }

    submit = () => {
        if(this.state.selected.length <= 0){
            RRCToast.show('请选择要迁移资产', 2, 5000);
            return;
        }
        if(!this.state.reasonId){
            RRCToast.show('请选择变更状态', 2, 5000);
            return;
        }
        if(this.state.reasonId==3){
            for(var i=0;i<this.state.selectedShow.length;i++){
                var item = this.state.selectedShow[i];
                if(item.status != '2' && item.status != '3'){
                    RRCToast.show('RFID号为'+item.rfid+"的资产未装机不能交付", 2, 5000);
                    return;
                }
            }
        }
        // if(!this.state.areaId){
        //     RRCToast.show('请选择区域位置', 2, 5000);
        //     return;
        // }
        // if(this.state.roomType == 1 && !this.state.rackId){
        //     RRCToast.show('请选择机柜', 2, 5000);
        //     return;
        // }
        // if(!this.state.manageBranchId){
        //     RRCToast.show('请选择负责部门', 2, 5000);
        //     return;
        // }
        // if(!this.state.manageUser){
        //     RRCToast.show('请选择负责人', 2, 5000);
        //     return;
        // }
        // if(this.state.startU && this.state.selected.length > 1){
        //     RRCToast.show('选择U位后只能迁移单一资产', 2, 5000);
        //     return;
        // }

        let params ={
            // datacenterId: this.state.dataCenterId,
            // roomId:this.state.areaId,
            // rackId: this.state.rackId,
            // start: this.state.startU,
            // manageUser: this.state.manageUser,
            moveReason: this.state.reasonId,
            assetIdList: this.state.selected,
        }
        //console.log(JSON.stringify(params));
        RRCLoading.setLoadingOptions({
            text: '请稍候',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
            loadingTextStyle: {}
        })
        //console.log(result);
        HttpUtil.post('createMove', params)
            .then(result => { 
                if(result.httpCode == 200){ 
                    RRCToast.show('保存成功', 2, 5000);
                    RRCLoading.hide();
                    this.setState({
                        selected: [],
                        selectedShow: [],
                        reasonId:'',
                        reasonName:'',
                    });
                }else{
                    RRCLoading.hide();
                    RRCToast.show('系统异常', 1, 5000);
                }
            })
            .catch(error => {
                //console.log(error);
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 5000);
            })

    }

    infraredReceived(code) {
        let args = {
            searchNum: code[0],
        }
        HttpUtil.post('assetData', args)
        .then(result => {         
            //console.log(result)
            if(result.httpCode == 200 && 'data' in result){
                let selected = [];
                let selectedShow = [];
                if(!that.state.selected.includes(result.data.id_)){
                    selected.push(result.data.id_);
                    selectedShow.push({ id: result.data.id_, name: result.data.assetName, rfid: result.data.rfidNo,status:result.data.status });
                    that.setState({
                        selected: selected.concat(that.state.selected),
                        selectedShow: selectedShow.concat(that.state.selectedShow),
                    });
                }
                
                RRCLoading.hide();
            }else{
                RRCLoading.hide();
                RRCToast.show('未查找到资产', 2, 3000);
            }
        })
        .catch(error => {
            //console.log(error);
            RRCLoading.hide();
            RRCToast.show('系统异常', 2, 3000);
        })
    }

    rfidInit(){
        if(DeviceInfo.getDeviceId() === 'rk30sdk'){
            // 红外测试
            //console.log('批量变更页的红外读头状态:'+InfraredModule.getState());
            InfraredModule.init();
            //console.log('批量变更页红外初始化完成')
            this.infraredListener = DeviceEventEmitter.addListener('onInfraredReveice', this.infraredReceived);
        }
    }

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <NavigationEvents onDidFocus={() => this.rfidInit()} onDidBlur={() => this.componentWillUnmount()}/>
                <View style={styles.header}>
                    <View style={{ width: getPixel(55), justifyContent:'center', alignItems:'center'}}>
                        <TouchableOpacity onPress={() => this.back()}>
                            <Image source={ require('../images/back.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                        </TouchableOpacity>
                    </View>
                    <View style={{ width: getScreenWidth() - getPixel(110), justifyContent:'center', alignItems:'center' }}>
                        <Text style={{ fontSize: getPixel(17), color:'#333' }}>批量变更</Text>
                    </View>
                    <View style={{ width: getPixel(55), justifyContent:'center', alignItems:'center'}}>
                    </View>
                </View>
                <Text style={{ marginBottom: getPixel(10), backgroundColor:'#FFF', height:getPixel(40), lineHeight:getPixel(40), paddingLeft:getPixel(15), color: '#999', fontSize: getPixel(15) }}>准备变更资产数量: { this.state.selected.length }</Text>
                <FlatList
                    style={{ backgroundColor: '#F5F5F5'}}
                    data={this.state.selectedShow}
                    renderItem={({item}) => this.renderItem(item)}
                    keyExtractor={(item, index) => index.toString()}
                >     
                </FlatList>
                <Formik
                initialValues={{ }}
                onSubmit={ values => this.submit(values) }
                >
                {({ handleChange, setFieldValue, handleBlur, handleSubmit, values }) => (
                     <View>
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>变更状态</Text>
                            <TouchableOpacity onPress={this.openReasonModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.reasonName }</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openReasonModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>
                        {/* <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>区域位置</Text>
                            <TouchableOpacity onPress={this.openAreaModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.areaName }</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openAreaModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>
                        { this.state.roomType==1?
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>机柜</Text>
                            <TouchableOpacity onPress={this.openRackModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.rackName }</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openRackModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>:null
                        }
                        { this.state.roomType==1?
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.inputLable }>起始U位</Text>
                            <TextInput style={ styles.inputValue} placeholder="请输入起始U位" onChangeText={ text => this.handleChange({ startU: text })}  value={ this.state.startU }  />
                        </View>:null
                        }
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>负责部门</Text>
                            <TouchableOpacity onPress={this.openManageBranchModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.manageBranchName}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openManageBranchModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>负责人</Text>
                            <TouchableOpacity onPress={this.openManageUserModal.bind(this)}>
                                <Text style={ styles.selectValue }>{this.state.manageUserName}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openManageUserModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View> */}
                    </View>
                )}
                </Formik>


                <View style={styles.buttonGroup}>
                    { DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                    <TouchableOpacity onPress={this.openSnScan.bind(this)}>
                        <View style={styles.buttonSearch}>
                            <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>扫描</Text>
                        </View>
                    </TouchableOpacity> : null
                    }
                    <TouchableOpacity onPress={this.submit}>
                        <View style={ DeviceInfo.getDeviceId() !== 'rk30sdk' ? styles.buttonSave: styles.buttonSaveAll}>
                            <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>提交</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <Reason data= {this.state.moveReasonList} isVisible = { this.state.showReasonModal } closeModal={ this.closeReasonModal } selectNode={ this.selectReason } onRequestClose={ this.closeReasonModal }/>
                {/* <Area data= {this.state.datacenterRoomTree} isVisible = { this.state.showAreaModal } closeModal={ this.closeAreaModal } selectNode={ this.selectArea } />
                <Rack data= {this.state.racks} isVisible = { this.state.showRackModal } closeModal={ this.closeRackModal } selectNode={ this.selectRack } />
                <BranchTree treeData= {this.state.branchList} isVisible = { this.state.showManageBranchModal } closeModal={ this.closeManageBranchModal } selectNode={ this.selectManageBranch }/>
                <UserTree treeData= {this.state.selectUserList} isVisible = { this.state.showManageUserModal } closeModal={ this.closeManageUserModal } selectNode={ this.selectManageUser }/> */}
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5',
    },
    header: {
        height: getPixel(50),
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
        flexDirection: 'row',
    },
    row: { 
        flexDirection: 'row',
        height: getPixel(60),
        backgroundColor:'#FFF',
        alignItems: 'center',
        paddingLeft: getPixel(15),
        marginBottom: getPixel(10),
    },
    name: {
        fontSize: getPixel(16),
        color: '#333',
    },
    rfid: {
        fontSize: getPixel(14),
        color: '#999',
    },
    rowLeft: {
        width: getScreenWidth() - getPixel(70),
     
    },
    rowRight: {
        width: getPixel(70),
        paddingLeft: getPixel(10),
    },
    buttonGroup: {
        flexDirection: 'row',
        paddingLeft: getPixel(15),
        paddingRight: getPixel(15),
        height: getPixel(60), 
        backgroundColor: '#FFF',
        width: getScreenWidth(),
        alignItems: 'center',
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
    },
    buttonSearch: {
        backgroundColor: '#6484FA', 
        height: getPixel(40), 
        borderTopLeftRadius: getPixel(10),
        borderBottomLeftRadius: getPixel(10),
        width: (getScreenWidth() - 30) / 2,
    },
    buttonSave: {
        backgroundColor: '#4a69dd', 
        height: getPixel(40), 
        borderTopRightRadius: getPixel(10),
        borderBottomRightRadius: getPixel(10),
        width: (getScreenWidth() - 30) / 2,
    },
    buttonSaveAll: {
        backgroundColor: '#4a69dd', 
        height: getPixel(40), 
        borderRadius: getPixel(10),
        width: (getScreenWidth() - 30),
    },
    formGroup: {
        flexDirection: 'row',
        alignItems: 'center',
        height: getPixel(50),
        backgroundColor: '#FFF',
        paddingLeft: getPixel(10),
        paddingRight: getPixel(10),
    },
    selectLable: {
        fontSize: getPixel(15),
        width: getPixel(90),
        paddingLeft: getPixel(5),
        color: '#333',
    },
    selectValue: {
        fontSize: getPixel(15),
        width: getScreenWidth() - getPixel(135),
    },
    inputLable: {
        fontSize: getPixel(15),
        width: getPixel(90),
        paddingLeft: getPixel(5),
        color: '#333',
    },
    inputValue: {
        fontSize: getPixel(15),
        width: getScreenWidth() - getPixel(115),
    },
    selectIcon: {
        width: getPixel(25),
        alignItems: 'center',
    },

});